<template>
  <a-popover v-if="attrList[0]" position="bottom">
    <div class="text-limit">{{ getAllName() }}</div>
    <template #content>
      <div v-for="(item, index) of attrList" :key="index">{{ item.name }}: {{ getAttValue(item) }} </div>
    </template>
  </a-popover>
  <div v-else>--</div>
</template>

<script lang="ts" setup>
  import { onMounted, ref } from 'vue'
  let props = defineProps(['info'])
  let attrList = ref(props.info.dataFromRestApi?.attributes || [])

  const getAttValue = (data: any) => {
    let arr = data.options
    return arr.join(',')
  }
  const getAllName = () => {
    let arr: any = []
    attrList.value.forEach((e: any) => {
      arr.push(e.name)
      if (e.options) arr.push(getAttValue(e))
    })
    return arr.join(',')
  }
</script>

<style lang="less" scoped></style>
